<template>
    <div>
      <h2>签约信息</h2>
<!--      根据获取的状态(status)的五个值:0、1、2、3、4，显示不同的颜色文字-->
      <el-tag :type="SigningInfo.status===0?'warning':SigningInfo.status===1?'success':'danger'" v-if="SigningInfo.status!==3 && SigningInfo.status!==4">{{ SigningInfo.status===0?'待审核':SigningInfo.status===1?'待支付':'已驳回' }}</el-tag>
<!--      status的值如果是3代表生效中，4代表已过期-->
      <el-tag v-if="SigningInfo.status===3" type="success">生效中</el-tag>
      <el-tag v-if="SigningInfo.status===4" type="danger">已过期</el-tag>
      <el-card class="box-card">
        <div>
          <el-descriptions title="居民信息">
            <el-descriptions-item label="姓名"><el-link type="primary">{{ this.residents.name }}</el-link></el-descriptions-item>
            <el-descriptions-item label="身份证号码">{{ this.residents.idName }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ this.residents.sex }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ calculateAge() }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ this.residents.phone }}</el-descriptions-item>
            <el-descriptions-item label="现居地">{{ this.residents.address }}</el-descriptions-item>
            <el-descriptions-item label="居民标签">{{ this.residents.residentLabel }}</el-descriptions-item>
            <el-descriptions-item label="家庭成员">{{ familyMemberList.length > 0? familyMemberList.map(item => `${item.name}`).join(', ') : 'No names available' }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
      <el-card class="box-card">
        <el-descriptions title="签约信息">
          <el-descriptions-item label="签约编号">{{ this.SigningInfo.number }}</el-descriptions-item>
          <el-descriptions-item label="签约状态">{{ this.SigningInfo.status===0?'待审核':this.SigningInfo.status===1?'待支付':this.SigningInfo.status===2?'已驳回':this.SigningInfo.status===3?'生效中':'已过期' }}</el-descriptions-item>
          <el-descriptions-item label="签约机构">{{ this.SigningInfo.institutionName }}</el-descriptions-item>
          <el-descriptions-item label="签约团队">{{ this.SigningInfo.teamName }}</el-descriptions-item>
          <el-descriptions-item label="签约医生">{{ this.SigningInfo.doctorName}}</el-descriptions-item>
          <el-descriptions-item label="服务包">{{ this.SigningInfo.serviceName  }}</el-descriptions-item>
          <el-descriptions-item label="签约周期">{{ this.SigningInfo.signingCycle }}</el-descriptions-item>
          <el-descriptions-item label="费用">{{ this.SigningInfo.cost }}</el-descriptions-item>
          <el-descriptions-item label="签约类型">{{ this.SigningInfo.contractType }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ this.SigningInfo.applicationTime }}</el-descriptions-item>
          <el-descriptions-item label="生效日期">{{ this.SigningInfo.effectiveDate }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ this.SigningInfo.remarks }}</el-descriptions-item>
          <el-descriptions-item label="驳回原因" v-if="this.SigningInfo.status===2">{{ this.SigningInfo.reasonForRejection }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
<!--      根据状态显示按钮-->
      <el-button type="primary" v-if="this.SigningInfo.status===0||this.SigningInfo.status===1" @click="updateEdit()">编辑签约信息</el-button>
      <el-button type="primary" v-if="this.SigningInfo.status===3||this.SigningInfo.status===4" @click="updateEdit()">续约</el-button>
      <el-button type="success" v-if="this.SigningInfo.status===0" @click="ApprovedByreView()">审核通过</el-button>
      <el-button type="danger" v-if="this.SigningInfo.status===0" @click="rejectEject()">驳回</el-button>
      <el-button type="success" v-if="this.SigningInfo.status===1">提醒支付</el-button>
      <el-button @click="returnPending()">返回</el-button>
      <el-dialog title="驳回确定" :visible.sync="dialogFormVisibleReject">
        <el-form :model="reasonForRejection">
          <el-form-item label="驳回原因">
            <el-input v-model="reasonForRejection" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleReject = false">取 消</el-button>
          <el-button type="primary" @click="reject()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
import axios from "axios";

export default {
  name: "DetailedSigning",
  data() {
    return {
      pendingSigningId: null,
      residents: {},
      birthDateFromBackend: null,
      SigningInfo: {},
      familyMemberList: [],
      dialogFormVisibleReject: false,
      reasonForRejection: null
    }
  },
  created() {
  //   接收传递过来的参数
    this.pendingSigningId=this.$route.query.id
    this.findByPendIdSigningInfo()
    this.findByPendIdResidents()
  },
  methods: {
    updateEdit(){
      this.$router.push({path: '/qianyue/daichuli/editContractInformation', query: {pendingSigningId: this.pendingSigningId}})
    },
    reject(){
      axios.post(`http://localhost:8201/pendingSigning/reject`,{
        pendingSigningId:this.pendingSigningId,
        reasonForRejection:this.reasonForRejection
      }).then(res=>{
        this.$message(res.data.message)
        this.dialogFormVisibleReject=false
        this.findByPendIdSigningInfo()
      })
    },
    rejectEject(){
      this.dialogFormVisibleReject=true
      this.reasonForRejection=null
    },
    ApprovedByreView(){
      axios.get(`http://localhost:8201/pendingSigning/ApprovedByreView?pendingSigningId=${this.pendingSigningId}`).then(res=>{
        this.$message(res.data.message)
        this.findByPendIdSigningInfo()
      })
    },
    returnPending(){
      if (this.SigningInfo.status===3||this.SigningInfo.status===4){
        this.$router.push({path: '/qianyue/jilu/qjilu'})
      }else {
        //返回PendingSigning页面
        this.$router.push({path: '/qianyue/daichuli'})
      }

      console.log(this.SigningInfo.status)
    },
    findByPendIdSigningInfo(){
      axios.get(`http://localhost:8201/signingInfo/findByPendIdSigningInfo?pendingSigningId=${this.pendingSigningId}`).then(res=>{
        this.SigningInfo=res.data.data
      })
    },
    calculateAge() {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const birthDate = new Date(this.birthDateFromBackend);
      const birthYear = birthDate.getFullYear();
      return currentYear - birthYear;
    },
    findByPendIdResidents(){
      axios.get(`http://localhost:8201/residents/findByPendIdResidents?pendingSigningId=${this.pendingSigningId}`).then(res=>{
        this.$message(res.data.message)
        this.residents=res.data.data
        this.familyMemberList=res.data.data.chengyuanList
      })
    }
  }
}
</script>

<style scoped>

</style>